<template>
  <div>
    <div class="top">
      <img src="http://jyitglk.online/music/assets/hot_music-Cp3KIXU4.png" />
      <div class="date">更新日期:{{ currentMonth }}月{{ currentDate }}日</div>
    </div>
    <!--加载中...-->
    <GlobalLoading v-if="isShowLoading"></GlobalLoading>
    <div class="hotSongs">
      <div class="left">
        <div
          class="number"
          :class="{ actived: currentIndex == index }"
          v-for="(item, index) in blockList"
          :key="index.Id"
        >
          <div class="order">{{ index + 1 }}</div>
        </div>
      </div>
      <div class="right">
        <GlobalSongs :blockList="blockList"></GlobalSongs>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import GlobalSongs from "@/components/GlobalSongs.vue";
import GlobalLoading from "@/components/GlobalLoading.vue";
import { reactive, onMounted, ref } from "vue";
import { showToast } from "vant";
import { useMainStore } from "@/pinia/store.ts";
import axios from "axios";
import { getToplistApi } from "@/request/api/home.ts";

const currentIndex = ref(0);
const mainStore = useMainStore();
const blockList = ref([]);
const value = ref("");
const isShowLoading = ref([]);

//更新日期
//月份是从0开始的，所以需要+1
const currentMonth = ref(new Date().getMonth() + 1);
const currentDate = ref(new Date().getDate());
const intervalId = setInterval(() => {
  currentMonth.value = new Date().getMonth() + 1;
  currentDate.value = new Date().getDate();
}, 1000);

// 热歌榜
const getToplist = async () => {
  const res = await getToplistApi({ id: 3778678 });
  console.log("热歌榜");
  console.log(res);
  blockList.value = res.data.playlist.tracks;
  console.log(blockList.value);
};
onMounted(async () => {
  await getToplist();
  isShowLoading.value = false;
});
</script>
  
<style lang="scss" scoped>
.top {
  position: fixed;
  top: 0;
  background-image: url(https://s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252389c26bcf016816242eaa6aee=);
  box-sizing: border-box;
  width: 100%;
  height: 146px;
  padding: 20px;
  > img {
    display: block;
    width: 142px;
    height: 67px;
  }
  > .date {
    margin-top: 10px;
    color: #fff;
    font-size: 14px;
    letter-spacing: 1.5px;
  }
}

.hotSongs {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 146px;
  .left {
    display: block;
    width: 10%;
    height: 100%;
    .number {
      .order {
        display: flex;
        height: 56px;
        justify-content: center;
        align-items: center;
        color: #999;
        font-size: 17px;
      }
    }
  }
  .right {
    display: block;
    width: 90%;
    height: 100%;
    padding-right: 15px;
  }
}
</style>